<template>
    <div>
        <SuperTable ref="table" path="/partner/depositWithdrawal/index" :params="params" :columns="columns">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.partner_id" clearable placeholder="商户号" style="width: 200px;" />
                    </FormItem>
                    <FormItem label="状态" prop="status">
                        <Select v-model="filter.status" clearable style="width: 80px">
                            <Option :value="-1">已驳回</Option>
                            <Option :value="0">待审核</Option>
                            <Option :value="1">已审核</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>

        <Modal title="提现审核" v-model="showModal" :width="420" @on-cancel="handleCancel">
            <Form ref="form" :model="form" :rules="rules" :label-width="60">
                <FormItem label="提现商家" prop="partner_name">
                    <Input v-model="form.partner_name" disabled/>
                </FormItem>
                <FormItem label="提现金额" prop="amount">
                    <Input v-model="form.amount" disabled/>
                </FormItem>
                <FormItem label="状态" prop="status" required>
                    <RadioGroup v-model="form.status">
                        <Radio :label="1">通过</Radio>
                        <Radio :label="-1">驳回</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem v-if="form.status === -1" label="驳回原因" prop="reason">
                    <Input v-model="form.reason" :rows="6" maxlength="200" show-word-limit type="textarea" placeholder="请填写驳回原因" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import { copy } from '@/libs/tools';

export default {
    components: {
        SuperTable
    },
    data() {
        return {
            showModal: false,
            submiting: false,
            form: {
                id: '',
                status: 1,
                reason: '',
            },
            rules: {},
            filter: {
                partner_id: '',
                status: ''
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '商家名称',
                    render: (h, params) => {
                        return h('span', params.row.partner ? params.row.partner.name : '');
                    }
                },
                {
                    title: '账户信息',
                    render: (h, params) => {
                        let text = '开户人：' + (params.row.partner.type == 1 ? params.row.partner.name : params.row.partner.real_name) + '\n' +
                                   '开户行：' + params.row.partner.bank_name  + '\n' +
                                   '银行卡号：' + params.row.partner.bank_account
                        return h('div', [
                            h("Poptip", {
                                props:{
                                    transfer: true,
                                    // width: '400',
                                    placement: 'left',
                                    trigger: 'hover',
                                    content: text,
                                    wordWrap: true
                                }
                            }, [
                                h("a",{
                                    on: {
                                        click: () => {
                                            copy(text,() => {
                                                this.$Message.success('复制成功');
                                            },() => {
                                                this.$Message.error('复制失败');
                                            });
                                        }
                                    }
                                },'复制账户')
                            ])
                        ]);
                    }
                },
                {
                    title: '商户号',
                    key: 'partner_id'
                },
                {
                    title: '提现金额',
                    key: 'amount'
                },
                {
                    title: '审核状态',
                    key: 'status_text'
                },
                {
                    title: '驳回原因',
                    render: (h, params) => {
                        let content = params.row.reason
                        content = content.length <= 20 ? content : content.substring(0, 20) + '...';
                        let Ptext = [
                            h('span',content)
                        ];
                        if (content.length > 20){
                            Ptext.push(
                                h("Poptip", {
                                    props:{
                                        transfer: true,
                                        width: '400',
                                        placement: 'right',
                                        trigger: 'hover',
                                        content: params.row.reason,
                                        wordWrap: true
                                    }
                                }, [
                                    h("a",'更多')
                                ])
                            )
                        }
                        return h('p', Ptext);
                    }
                },
                {
                    title: '申请时间',
                    key: 'created_at'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        let btns = [
                            h("Button", {
                                props: {
                                    type: "primary",
                                    size: "small",
                                    disabled: params.row.status != 0
                                },
                                on: {
                                    click: () => {
                                        this.showModal = true;
                                        this.form.id = params.row.id;
                                        this.form.partner_name = params.row.partner.name;
                                        this.form.amount = params.row.amount;
                                    }
                                }
                            }, "审核")
                        ];
                        return h("div", btns);
                    }
                }
            ]
        }
    },
    mounted() {
        if ('status' in this.$route.query) {
            this.filter.status = this.$route.query.status;
            this.params.status = this.$route.query.status;
            this.$refs.table.init();
        }
    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.partner_id = filter.partner_id;
            this.params.status = filter.status;
            this.$refs.table.init();
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        id: form.id,
                        status: form.status,
                        reason: form.reason,
                    }
                    this.submiting = true;
                    this.$ajax.post('/partner/depositWithdrawal/audit', params).then(res => {
                        this.$Message.success('操作成功');
                        this.handleCancel();
                        this.$refs.table.init();
                        this.submiting = false;
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.id = '';
                this.form.status = 1;
                this.form.reason = '';
            }, 300)
        },
    }
}
</script>